<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-列表</title>
    <link rel="stylesheet" href="css/案例列表.css">
</head>

<body>
    <header>
        <div class="banner1">
            <div class="banner1-con">
                <h1><img src="http://10.35.164.24/day 25/image/logo_02.jpg" alt=""></h1>
                <ul class="firstul">
                    <li>
                        <a href="home.html">网站首页</a>
                    </li>
                    <li>
                        <a href="#">传悦资源</a>
                    </li>
                    <li>
                        <a href="案例-详情.html" style="background-color:#dd4012 ;">传悦案例</a>
                    </li>
                    <li>
                        <a href="#">传悦服务</a>
                    </li>
                    <li>
                        <a href="solutionlist.html">解决方案</a>
                    </li>
                    <li>
                        <a href="#">需求提交</a>
                    </li>
                </ul>
                <ul class="secondul">
                    <li class="first">0535-60652189</li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="banner2">
            <div class="abbanner">
                <ul>
                    <li>网站首页</li>
                    <li>传悦案例</li>
                </ul>
            </div>
        </div>
    </header>
    <section>
        <div class="tabbanner">
            <ul class="tab">
                <li style="margin-left: 3px; background-color:#636363 ;">全部</li>
                <li>网站建设</li>
                <li>推广运营</li>
                <li>品牌策划</li>
                <li>网络全案</li>
            </ul>
            <ul class="caselist">
                <li id="template">
                    <a href="案例-详情.html">
                        <div>
                            <img src="" alt="">
                            <h3 class="h3"></h3>
                            <p class="p"></p>
                        </div>
                    </a>

                </li>
            </ul>
            <ul class="dotlist">
                <li></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li></li>
            </ul>
        </div>
    </section>
    <footer>
        <div class="bottom">
            <h1><img src="image/bottom_logo.png" alt="">
            </h1>
            <div class="right">
                <ul>
                    <li>关于传说</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li style="margin-right: 4px;">付款账户</li>
                </ul>
                <h2>Copright 2013 创梦网络科技有限责任公司 || 传悦 Chnyoo.cn All Rights Received &nbsp;&nbsp;&nbsp;京ICP备12005221号</h2>
            </div>
        </div>
    </footer>
</body>

</html>
<script>
    let template = document.querySelector("#template");
    let caselist = document.querySelector(".caselist");
    let http = new XMLHttpRequest();
    http.open("get", `http://10.35.164.24:81/caselists`);
    http.send();
    http.onreadystatechange = function() {
        if (http.readyState === 4) {
            let cases = JSON.parse(http.responseText);
            cases.forEach(function(item, index) {
                let newItem = template.cloneNode(true);
                newItem.id = "";
                caselist.appendChild(newItem);
                newItem.querySelector(".caselist img").src = item.smallimg;
                newItem.querySelector(".caselist h3").innerHTML = item.h3;
                newItem.querySelector(".caselist p").innerHTML = item.p;
                newItem.querySelector("a").href = newItem.querySelector("a").href + `?id=${item.id }`;
                console.log(newItem.querySelector("a").href);
            });
        }
    }
</script>